<template>
  <div class="form-logic-container">
    <el-tabs
      v-model="activeTab"
      class="form-logic-tabs"
    >
      <el-tab-pane
        :label="$t('form.logic.logicSettingsLabel')"
        name="logic"
      >
        <basic-logic-tab />
      </el-tab-pane>
      <!--      <el-tab-pane-->
      <!--        label="自定义 DSL"-->
      <!--        name="logic1"-->
      <!--      ></el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script lang="ts" name="FormLogic" setup>
import { onBeforeMount, ref } from "vue";
import BasicLogicTab from "./BasicLogic/index.vue";
import { formDesign } from "@/views/formgen/components/FormDesign/hooks/useFormDesign";
import { useRoute } from "vue-router";

const activeTab = ref("logic");

const { drawingList, queryProjectItems, formKey } = formDesign;
const route = useRoute();

onBeforeMount(async () => {
  console.log("drawingList", drawingList);
  // 如果是从编辑页那边过来会有这个参数 没有的话就查询下
  if (!drawingList.value || !drawingList.value.length) {
    formKey.value = route.query.key as string;
    await queryProjectItems();
  }
});
</script>

<style lang="scss" scoped>
.form-logic-container {
  width: 100%;
  height: calc(100vh - 85px);
  position: relative;
  overflow: hidden;
  background-color: #fff;
  user-select: none;
  padding: 0 20px;
}

.form-logic-tabs {
  height: 100%;

  :deep(.el-tabs__content) {
    height: calc(100% - 55px);
    overflow: hidden;
  }
}
</style>
